<template>
    <!-- 放款管理>风控审核 -->
    <div class="postloanaview">

        <div class="div">
            <div class="kuangxuan">
                <el-select v-model="value" class="m-2" placeholder="企业名称">
                    <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="input">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <input v-model="input" placeholder="请输入要查询的核心企业名称" class="inputs" />
                </div>
                <el-select v-model="value" class="m-2" placeholder="五级分类">
                    <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="caozuo">
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                </div>
            </div>

            <div class="caozuos">
                <el-button type="primary" plain>导出</el-button>
                <el-button type="primary" plain @click="choting">新增</el-button>
            </div>

        </div>



    </div>
    <!-- 表格部分 -->
    <div class="table">
        <el-table :data="tableData" style="width: 100%" :fit="true">

            <el-table-column prop="htContractid" label="序号">
                <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="htBusinessname" label="企业名称" width="180"></el-table-column>
            <el-table-column prop="htSocialcreditid" label="社会信用代码"></el-table-column>
            <el-table-column prop="htRegisteredmoney" label="注册资本"></el-table-column>
            <el-table-column prop="htSalesman" label="业务员"></el-table-column>
            <el-table-column prop="htProcessstatus" label="流程状态"></el-table-column>
            <el-table-column prop="htStarttime" label="任务开始时间"></el-table-column>
            <el-table-column prop="" label="操作">
                <template #default="scope">
                    <div class="tubiao">
                        <span @click="biaoge(scope.row.htContractid)">
                            <el-icon>
                                <View />
                            </el-icon>
                        </span>
                        <span text @click="open">
                            <el-icon>
                                <Promotion />
                            </el-icon>
                        </span>

                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 抽屉 -->
    <div class="choti">
        <el-drawer v-model="drawer" title="贷款五级分类" :before-close="handleClose">
            <el-form :model="form" :rules="rules" ref="formref">
                <el-form-item prop=" htBusinessname" label="企业名称:">
                    <el-input v-model="form.htBusinessname" />
                </el-form-item>
                <el-form-item prop="htSocialcreditid" label="社会信用代码:">
                    <el-input v-model="form.htSocialcreditid" />
                </el-form-item>
                <el-form-item prop="htRegisteredmoney" label="注册资本:">
                    <el-input v-model="form.htRegisteredmoney" />
                </el-form-item>
                <el-form-item prop="htSalesman" label="业务员:">
                    <el-input v-model="form.htSalesman" />
                </el-form-item>
                <el-form-item prop="htProcessstatus" label="流程状态:">
                    <el-input v-model="form.htProcessstatus" />
                </el-form-item>
                <!-- <el-form-item prop="htStarttime" label="任务开始时间:">
                    <el-input v-model="form.htStarttime" />
                </el-form-item> -->
                <el-form-item prop="htStarttime" label="任务开始时间:">
                    <el-date-picker v-model="form.htStarttime" type="date" placeholder="Pick a date"
                    :default-value="new Date(2010, 9, 1)"   value-format="YYYY-MM-DD"/>
                </el-form-item>

                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(formref)">
                        {{ "新增" }}
                    </el-button>
                </el-form-item>
            </el-form>

        </el-drawer>

    </div>
</template>

<script setup>
import serviceAxios from "@/apis"
import { ref } from "vue";
import { useRouter } from 'vue-router';

//弹框
import { markRaw } from 'vue'
import { ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
//提示
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'// 手动导入样式

import { reactive } from 'vue'//抽屉
var form = ref({ htBusinessname: '', htSocialcreditid: '', htRegisteredmoney: '', htSalesman: '', htProcessstatus: '', htStarttime: '' })
var formref = ref([])
var router = useRouter();
const tableData = ref([])//表格
var drawer = ref(false)//抽屉
var formData =ref ({})

//抽屉表单验证
const rules = {
    htBusinessname: [
        { required: true, message: '企业名称', trigger: 'blur' }
    ],
    htSocialcreditid: [
        { required: true, message: '社会信用代码', trigger: 'blur' }
    ],
    htRegisteredmoney: [
        { required: true, message: '注册资本', trigger: 'blur' }
    ],
    htSalesman: [
        { required: true, message: '业务员', trigger: 'blur' }
    ],
    htProcessstatus: [
        { required: true, message: '流程状态', trigger: 'blur' }
    ],
    htStarttime: [
        { required: true, message: '任务开始时间', trigger: 'blur' }
    ],

}

serviceAxios.zyf.htxinx_htContract().then((res) => {
    // console.log(res.data.data,'11111111111111111');
    tableData.value = res.data.data
    // console.log(tableData.value,'123456');

})

var xlxllist = [
    {
        value: '企业管理1',
        label: '企业管理',
    },
]

const biaoge = (id) => {
    console.log(id, '111111112222');
    localStorage.setItem("id", id)
    router.push('/home/loan/loanaone')
}


// 弹框内容
const open = () => {
    ElMessageBox.confirm(
        '是否确认要提交资产保全申请',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            icon: markRaw(QuestionFilled),
            center: true,
        }
    )
}
//新增
var onSubmit = (formEl) => {
    formEl.validate(async (valid) => {
        console.log(valid, form.value, '5555555555555');
        if (valid) {
            let formData = {
                ht_bsinessname:form.value.htBusinessname,   
                ht_socialcreditid:form.value.htSocialcreditid,
                ht_registeredmoney:form.value.htRegisteredmoney,
                ht_salesman:form.value.htSalesman,
                ht_processstatus:form.value.htProcessstatus,
                ht_starttime:form.value.htStarttime,    
            }
            var res = await serviceAxios.zyf.htxinx_posthtContract(formData)
            console.log(res.data, '333333333333333');
            if (res.data.code == 200) {
                ElNotification.closeAll();
                ElNotification.success({ message: '添加管理员成功!' });
                drawer.value = false//关闭抽屉
            } else {
                //提示"添加失败!"
                ElNotification.closeAll();
                ElNotification.error({ message: '添加失败!' });
            }

        }

    })

}
var choting = () => {// 打开抽屉
    drawer.value = true
}
</script>

<style scoped>
.postloanaview .div {
    display: flex;
    justify-content: space-between;
    width: 98%;
    padding: 20px
}

.kuangxuan {
    width: 60%;
    display: flex;
    justify-content: space-between;
}

table {
    position: relative;
}

.title {
    width: 200px;
    height: 40px;
    background-color: aqua;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 30px;

}

.m-2 {
    width: 140px;
}

.postloanaview .input {
    width: 300px;
    height: 30px;
    border: 1px solid #e5e7ec;
    display: flex;
    align-items: center;
    justify-content: space-around;


}

.postloanaview .inputs {
    width: 260px;
    height: 28px;
    border: none;
}

.tubiao {
    width: 100px;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #4ba7fe;
    margin: auto;
}

.tubiao span {
    font-size: 20px;
    display: none;
}

.tubiao:hover span {
    display: block;
}

.yema {
    position: absolute;
    left: 50%;
    margin-left: -200px;
    bottom: 100px;

}
</style>